<template>
  <div class="main">
    <div ref="chartColumn" class="mapBox"></div>
    <el-radio-group class="radio" v-model="radio">
      <el-radio class="item" v-for="(item,index) in radioGroup" :index="index" :label="item.hylx" @click.native.prevent="radioChange(item)">
        {{item.hylx}}
        <div class="triangleTopLeft" :style="setStyle(item.color)"></div>
      </el-radio>
    </el-radio-group>
  </div>
</template>
<script>
import { area } from "./SuZhou.js";
import { queryIndustrialColony } from "@/api/screen/index";
export default {
  props: {
    data: {
      type: Array,
    },
  },
  data() {
    return {
      radio: '',
      radioGroup:[],  //地图左侧产业列表
      cyList: [],
      geoCoordMap: [
        {
          name: "吴中区",
          value: [120.3971099, 31.232765, 200],
          itemStyle: {
            color: "#00EEFF",
          },
        },
        {
          name: "相城区",
          value: [120.601043, 31.4802088, 160],
          itemStyle: {
            color: "#00EEFF",
          },
        },
        {
          name: "姑苏区",
          value: [120.602416, 31.3043684, 100],
          itemStyle: {
            color: "#00EEFF",
          },
        },
        {
          name: "工业园区",
          value: [120.75347, 31.3677, 200],
          itemStyle: {
            color: "#00EEFF",
          },
        },
        {
          name: "高新区",
          value: [120.3840637, 31.3723991, 160],
          itemStyle: {
            color: "#00EEFF",
          },
        },
        {
          name: "吴江区",
          value: [120.60585, 30.9787865, 160],
          itemStyle: {
            color: "#00EEFF",
          },
        },
        {
          name: "常熟市",
          value: [120.74852, 31.658156, 200],
          itemStyle: {
            color: "#00EEFF",
          },
        },
        {
          name: "张家港市",
          value: [120.621643, 31.9195301, 200],
          itemStyle: {
            color: "#00EEFF",
          },
        },
        {
          name: "昆山市",
          value: [120.958137, 31.381925, 200],
          itemStyle: {
            color: "#00EEFF",
          },
        },
        {
          name: "太仓市",
          value: [121.184692, 31.5949131, 100],
          itemStyle: {
            color: "#00EEFF",
          },
        },
      ],
    };
  },
  mounted() {
    this.echartsInit();
  },
  methods: {
    setStyle(color){
      let obj = {
        borderTop: '5px solid '+ color
      }
      return obj
    },
    //取消选中
    radioChange(e){  
      e.hylx === this.radio ? (this.radio = "") : (this.radio = e.hylx);
      // console.log(this.radio,"radiooo")
      this.getQueryIndustrialColony()
    },
    // 产业集群 分产业
    async getQueryIndustrialColony(){
      const res = await queryIndustrialColony({
        types: [this.radio]
      })
      if (res.code == 200) {
        this.cyList = res.data
        this.echartsInit()
        // console.log(this.cyList,"this.cyList")
      }
    },
    echartsInit() {
      const _this = this;
      _this.radioGroup = _this.data[0]
      let myChart = this.$echarts.init(this.$refs.chartColumn);
      this.$echarts.registerMap("jiangsu", area);
      // console.log("_this.cyList",_this.cyList)
      if(_this.cyList.length == 0 && this.radio == ''){
        // console.log("没筛选")
        var goData  = _this.data[1].map((item) => {
          return {
            name: item.regionName,
            value: item.qysl
          };
        });
      }else{
        // console.log("筛选了")
        var goData  = _this.cyList.map((item) => {
          return {
            name: item.regionName,
            value: item.qysl
          };
        });
      }

      var series = [];
      [
        ["", goData],
        // ['徐州', backData],
      ].forEach((item, i) => {
        series.push(
          {
            type: "map",
            mapType: "jiangsu",
            aspectScale: 0.85,
            layoutCenter: ["50%", "52%"], //地图位置
            layoutSize: "90%",
            zlevel: 0,
            zoom: 1, //当前视角的缩放比例 // roam: true, //是否开启平游或缩放
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 1,
              max: 2,
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
              // 文字hover颜色
              emphasis: {
                show: true, //是否在高亮状态下显示标签。
                textStyle: {
                  color: "#fff",
                }, //高亮状态下的标签文本样式。
              },
            },
            itemStyle: {
              normal: {
                areaColor: 'rgba(37, 157, 255, 0.2)',
                shadowColor: '#2B8FAF',
                // areaColor: "#12235c",
                borderColor: "#fff",
                borderWidth: 2,
                // shadowColor: "#95DCFD",
                shadowBlur: 10,
              },
              emphasis: {  //鼠标悬浮颜色
                areaColor: 'rgba(35, 242, 255, 0.6)',
                borderColor: 'rgba(254,240,59,0)',
              },
            },
            data: goData,
          },

          {
            name: "",
            type: "effectScatter",
            coordinateSystem: "geo",

            // symbolSize:50, //function (val) {
            //     var a = (maxSize4Pin - minSize4Pin) / (max - min);
            //     var b = minSize4Pin - a*min;
            //     b = maxSize4Pin - a*max;
            //     return a*val[2]+b;
            // },
            symbolSize: function (value) {  //标点大小
              return 10;
            },
            tooltip: {
              show: false,
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#fff",
                  fontSize: 4,
                },
              },
            },
            rippleEffect: {
              number: 3, // 波纹的数量。
              period: 5, // 动画的周期，秒数。
              scale: 3, // 动画中波纹的最大缩放比例。
              brushType: 'fill', // 波纹的绘制方式，可选 'stroke' 和 'fill'。
            },

            zlevel: 1,

            data: this.geoCoordMap,
          }
        );
      });
      var type = {
        type: "map",
        map: "jiangsu",
        geoIndex: 0,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        data: goData,
      };
      series.unshift(type);
      let option = {
        backgroundColor: "",
        textStyle: {
          color: "#fff",
        },
        confine: true,
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: "rgba(0,50,99,0.65)",
          borderColor: "rgba(0,129,255,1)",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontFamily: "SourceHanSansCN",
          },
        //   formatter: function (params) {
        //     //圆环显示文字
        //     return `    <div
        //   class="mapPop"
        //   style="
        //     width: 333px;
        //     height: 554px;
     
        //     padding: 20px;
         
        //   "
        // >
        //   <div
        //     class="mapPop_title"
        //     style="
        //       width: 100%;
        //       height: 27px;
        //       background: linear-gradient(
        //         90deg,
        //         #2981ee 0%,
        //         rgba(27, 67, 184, 0.1) 100%
        //       );
        //       font-size: 24px;
        //       color: #ffffff;
        //       font-family: YouSheBiaoTiHei;
        //       line-height: 27px;
        //       padding-left: 10px;
        //       margin-top: 10px;
        //     "
        //   >
        //     上游
        //   </div>
        //   <div
        //     class="mapPop_small_title"
        //     style="color: #e0f8ff; font-weight: bold; margin-top: 15px"
        //   >
        //     电子专用材料
        //   </div>
        //   <div class="mapPop_contant" style="color: #7cdffb; margin-top: 10px">
        //     电磁屏蔽材料
        //     <span class="mapPop_contant2" style="color: white">840</span>
        //     <span style="font-size: 14px">家企业</span>
        //   </div>
        //   <div class="mapPop_contant" style="color: #7cdffb; margin-top: 10px">
        //     光电材料
        //     <span class="mapPop_contant2" style="color: white">840</span>
        //     <span style="font-size: 14px">家企业</span>
        //   </div>
        //   <div class="mapPop_contant" style="color: #7cdffb; margin-top: 10px">
        //     磁性材料
        //     <span class="mapPop_contant2" style="color: white">840</span>
        //     <span style="font-size: 14px">家企业</span>
        //   </div>
        //   <div
        //     class="mapPop_title"
        //     style="
        //       width: 100%;
        //       height: 27px;
        //       background: linear-gradient(
        //         90deg,
        //         #2981ee 0%,
        //         rgba(27, 67, 184, 0.1) 100%
        //       );
        //       font-size: 24px;
        //       color: #ffffff;
        //       font-family: YouSheBiaoTiHei;
        //       line-height: 27px;
        //       padding-left: 10px;
        //       margin-top: 10px;
        //     "
        //   >
        //     上游
        //   </div>
        //   <div
        //     class="mapPop_small_title"
        //     style="color: #e0f8ff; font-weight: bold; margin-top: 15px"
        //   >
        //     电子专用材料
        //   </div>
        //   <div class="mapPop_contant" style="color: #7cdffb; margin-top: 10px">
        //     电磁屏蔽材料
        //     <span class="mapPop_contant2" style="color: white">840</span>
        //     <span style="font-size: 14px">家企业</span>
        //   </div>
        //   <div class="mapPop_contant" style="color: #7cdffb; margin-top: 10px">
        //     光电材料
        //     <span class="mapPop_contant2" style="color: white">840</span>
        //     <span style="font-size: 14px">家企业</span>
        //   </div>
        //   <div class="mapPop_contant" style="color: #7cdffb; margin-top: 10px">
        //     磁性材料
        //     <span class="mapPop_contant2" style="color: white">840</span>
        //     <span style="font-size: 14px">家企业</span>
        //   </div>
        //   <div
        //     class="mapPop_title"
        //     style="
        //       width: 100%;
        //       height: 27px;
        //       background: linear-gradient(
        //         90deg,
        //         #2981ee 0%,
        //         rgba(27, 67, 184, 0.1) 100%
        //       );
        //       font-size: 24px;
        //       color: #ffffff;
        //       font-family: YouSheBiaoTiHei;
        //       line-height: 27px;
        //       padding-left: 10px;
        //       margin-top: 10px;
        //     "
        //   >
        //     下游
        //   </div>
        //   <div
        //     class="mapPop_small_title"
        //     style="color: #e0f8ff; font-weight: bold; margin-top: 15px"
        //   >
        //     电子专用材料
        //   </div>
        //   <div class="mapPop_contant" style="color: #7cdffb; margin-top: 10px">
        //     电磁屏蔽材料
        //     <span class="mapPop_contant2" style="color: white">840</span>
        //     <span style="font-size: 14px">家企业</span>
        //   </div>
        //   <div class="mapPop_contant" style="color: #7cdffb; margin-top: 10px">
        //     光电材料
        //     <span class="mapPop_contant2" style="color: white">840</span>
        //     <span style="font-size: 14px">家企业</span>
        //   </div>
        //   <div class="mapPop_contant" style="color: #7cdffb; margin-top: 10px">
        //     磁性材料
        //     <span class="mapPop_contant2" style="color: white">840</span>
        //     <span style="font-size: 14px">家企业</span>
        //   </div>
        // </div>`;
        //   },
        },
        visualMap: {  //地图区域颜色
          show: false,
          type: "piecewise",
          pieces: [
            {
              max: 30,
              label: "",
              color: "#00327C",
            },
            {
              min: 30,
              max: 60,
              label: "",
              color: "#00327C",
            },
            {
              min: 89,
              label: "",
              color: "#00327C",
            },
          ],
          color: "#fff",
          textStyle: {
            color: "#fff",
          },
          visibility: "off",
        },
        //地图相关设置
        geo: {
          map: "jiangsu",
          aspectScale: 0.85,
          layoutCenter: ["50%", "52%"],
          //地图位置
          layoutSize: "90%",
          itemStyle: {
            normal: {
              shadowColor: "#396CB4",
              shadowOffsetX: 0,
              shadowOffsetY: 20,
              opacity: 0.9,
            },
            emphasis: {
              areaColor: "#276fce",
            },
          },
        },
        series: series,
      };
      myChart.setOption(option);
      let that = this;
      myChart.on("mousemove", function (params) {
        that.isAnimation = true;
        // that.tableData.forEach((e) => {
        //   if (e.name == params.name) {
        //     that.activeMap = e;
        //   }
        // });
      });
      myChart.on("mouseout", function (params) {
        that.activeMap = {
          name: "",
          num1: "",
          num2: "",
          num3: "",
          top: 0,
          right: 0,
          width: 0,
          height: 0,
        };
      });
      myChart.on("click", function (params) {
        // console.log(params,"点击了参数是")
      });
    },
  }, // all the methods should be put here in the last
};
</script>
<style scoped lang="scss">
.main{
  position: relative;
}

.mapBox {
  width: 100%;
  height: 100%;
  padding-left: 50px;
  //   background-color: red;
}

.radio{
  display: grid;
  position: absolute;
  top: 20px;
  left: 20px;
  .item{
    color: #fff;
    width: 158px;
    height: 35px;
    line-height: 35px;
    background-image: linear-gradient(to left, rgba(255,0,0,0), #155BBC);
    border-radius: 5px;
    padding-left: 10px;
    margin-bottom: 10px;
    position: relative;
    .triangleTopLeft{
      width: 0px;
      height: 0px;
      border-right: 5px solid transparent;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  ::v-deep .el-radio__inner{
    border-radius: 10%;
    border: 1px solid #68C8FA;
    background-color: unset;
  }
  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    content: '';
    width: 14px;
    height: 7px;
    border: 3px solid #00EEFF;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }
  ::v-deep .el-radio__input.is-checked + .el-radio__label {
    color: #fff;
  }
  ::v-deep .el-radio__inner::after {
    width: 0px;
    height: 0px;
  }
  ::v-deep .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
    -webkit-box-shadow: unset;
    box-shadow: unset;
}
}

@keyframes rotate-word {
  0% {
    opacity: 0;
    filter: blur(0px);
  }

  5% {
    opacity: 1;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
.v {
  margin-top: 5px;
}
// ============
.mapPop {
  width: 383px;
  height: 554px;
  background-color: red;
}
</style>
